<template>
    <div>
        <el-collapse v-model="activeName" accordion>
        <el-collapse-item :title="parentName" name="1">
            <div>
              <el-table  border :data="personData">
              <el-table-column  label="参数名称"  align="center">
                        <template #default="scope">
                            <div v-if="scope.row.required=='1'"><span class="red-tag">*</span> {{scope.row.name}}</div>
                            <div v-else> {{scope.row.name}}</div>
                        </template>
                    </el-table-column>
              <el-table-column label="录入参数" align="left">
                        <template #default="scope">
                            <div style="width:300px">
                                <el-input v-if="scope.row.parameter=='1'"  v-model="scope.row.input" readonly placeholder="" />
                                    <el-select  v-else-if="scope.row.parameter=='2'&&scope.row.multiple=='1'" v-model="scope.row.input"  placeholder="请选择" >
                                        <el-option
                                        v-for="item in scope.row.optionsArr"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        />
                                    </el-select>
                                    <el-checkbox-group  v-else-if="scope.row.parameter=='2'&&scope.row.multiple=='2'" v-model="scope.row.input" >
                                        <el-checkbox 
                                        v-for="item in scope.row.optionsArr"
                                        :key="item.value"
                                        :label="item.label">
                                        {{ item.label }}</el-checkbox>
                                        </el-checkbox-group>
                            </div>
                        </template>
                    </el-table-column>
              </el-table>
            </div>
        </el-collapse-item>
        </el-collapse>
        
    </div>
</template>
<script setup name="PreviewMaterial">
import { ref,reactive, onActivated } from 'vue'
import { parameterList } from "@/api/product/parameter";
const props = defineProps({
    personList: {
        type: Array,
        default:[]
    },
    parentName:{
        type:String,
        default:"个人信息"
    },
    parentId:{
        type:Number,
        default:""
    }
})
const activeName = ref('');
const personData = ref([])
function filterShow(){
    parameterList({
      type:'3',
      parent_id:props.parentId,
      page_size:"-1",
      page_count:"-1"
   }).then(res=>{
       if(res.data.list){
        let str=''
           personData.value= res.data.list.map(itm=>{
            str+=itm.id+','
            if(itm.options){
                let arr = itm.options.split(','),newArr = [];
                for(let i in arr){
                    newArr.push({ value: arr[i],label: arr[i]})
                }
                itm['optionsArr'] = newArr
            }else{
                itm['optionsArr'] =[]
            }
            return itm
           })
           if(str){
               localStorage.setItem("id"+props.parentId, str);
           }
       }else{
           personData.value= []
       }
   })
      
}
 filterShow();
</script>
<style >
.replenish-title{
    background-color: rgba(255, 204, 153, 1);
    line-height: 20px;
    padding: 20px 14px;
}
.title-tag{
    font-weight: bold;
}
:deep(.el-collapse-item__header){
    background-color:rgb(242, 242, 242);
    padding-left: 20px;
}
.red-tag{
color: red;
}
</style>